import React, { PureComponent } from 'react';
import {Input,Col,Row} from 'antd';
const InputGroup = Input.Group;
class TelPhone extends PureComponent {
    state = {
        codeArr:[]
    }
    componentDidMount() {
        const {value=''} = this.props;
        const codeArr = value.split('-');
        this.setState({
            codeArr
        })
    }
    changeTel = e =>{
        let {codeArr=[]} = this.state
        const {id,value} = e.currentTarget
        codeArr[id] = value.replace(/^\s+|\s+$/gm,'');
        if(id===2&&value.length===0){
            codeArr.pop();
        }
        const str = codeArr.join('-');
        if(str!==this.props.value){
            this.props.onChange(str)
        }
    }
    render(){
        const {codeArr=[]} = this.state
        return (
            <InputGroup >

                <Row gutter={24}>
                    <Col span={7}>
                        <Input id="0"  defaultValue={codeArr[0]} placeholder="区号" onChange={this.changeTel}/>
                    </Col>
                    <Col span={10}>
                        <Input id="1"  defaultValue={codeArr[1]} placeholder="座机号" onChange={this.changeTel}/>
                    </Col>
                    <Col span={7}>
                        <Input id="2"  defaultValue={codeArr[2]} placeholder="分机号" onChange={this.changeTel}/>
                    </Col>
                </Row>
            </InputGroup>
        )
    }
}

export default TelPhone;
